<template>
  <div class="group-2">
    <h1 class="title" data-aos="fade-up">产业服务</h1>
    <p class="desc" data-aos="fade-up" data-aos-delay="100">
      聚焦大宗制品行业，以在线交易为入口，数字物流为基础，增值服务为手段，助力传统实体企业实现供应链数字化、透明化、规范化，降本提效，信息流、商流、物流、资金流等业务流闭环，深度链接产业上下游，快速实现企业数字化转型升级，助力企业建设健康有活力的产业生态圈。
    </p>

    <ul class="section-1 flex-row">
      <li
        v-for="(el, i) in menuList"
        :key="i"
        :class="{ active: el.active }"
        @click="chooseMenu(el, i)"
      >
        {{ el.title }}
      </li>
    </ul>
    <ul class="menu-list flex-row" data-aos="fade-up" data-aos-delay="200">
      <li v-for="(el, i) in dataList" :key="i">
        <em :class="el.class"></em>
        <h2 class="menu-title">{{ el.title }}</h2>
        <p class="desc">{{ el.desc }}</p>
        <a v-if="el.to" :href="el.to" target="_blank">查看</a>
      </li>

      <li>
        <h2 class="menu-title" style="margin-bottom: 0.1rem">{{ active }}更多产业数字化产品</h2>
        <a :href="toPath" class="menu-text">点击进入 &nbsp;></a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const itemList0 = [
  {
    title: '在线交易',
    class: 'transaction',
    desc: '面向产业上、下游客户，提供在线下单、支付、合同、物流等全流程交易服务',
    to: 'https://www.sososn.com/'
  },
  {
    title: '数字物流',
    class: 'mall_2',
    desc: '提供一站式数字物流服务，记录出货信息、物流单据，定位运输行踪，让物料去向有据可查',
    to: 'http://sososn.cn:8291/xfwl/user/login'
  },
  {
    title: '数据智能',
    class: 'money',
    desc: '面向业务的全域全端多维度分析，实时采集汇聚、治理、分析、展示经营数据',
    to: 'http://82.157.24.39:8824/#/login'
  }
]

const itemList1 = [
  {
    title: '管理会议',
    class: 'transaction',
    desc: '帮助企业进行管理会议体系搭建，提高企业组织会议的效率和规范性，对会议内容进行记录并对识别的管理问题点的改善效果进行追踪'
  },
  {
    title: '同类企业经营对比',
    class: 'mall',
    desc: '汇集国内外上市公司市场数据、经营数据，通过大量专项指标，深入解析上市公司的经营动向，自下而上分析市场走势'
  },
  {
    title: '运营数据深度分析',
    class: 'money',
    desc: '通过实时分析、调整和预测帮助企业管理层有效洞察和理解运营数据，快速做出业务决策，洞察管理问题'
  },
  {
    title: '预算管理',
    class: 'money',
    desc: '提供在线的预算编制、审批、调整等功能，通过预算更好的承接企业战略落地'
  }
]

const itemList2 = [
  {
    title: '价格指数',
    class: 'transaction',
    desc: '实时提供各地区、各品类现货（期货）产品价格，满足多渠道、多维度、多角度的查询与展现，便于企业及时感知价格变化和市场波动'
  },
  {
    title: '行业资讯',
    class: 'mall',
    desc: '及时提供国内（外）相关行业新闻、供求、产品/技术、政策、评论、观点，以及招投标、会展会议等信息，便于企业全面洞察市场动态'
  },
  {
    title: '行业研究',
    class: 'money',
    desc: '融合国家统计局、海关总署、商务部、工信部、行业协会、咨询机构、媒体及专家学者等数据渠道，提供周报、月报、年报等行业解析报告'
  },
  {
    title: '竞对分析',
    class: 'money',
    desc: '构建基于竞争战略和竞争对手SWOT分析的数据模型，提供竞争对手企业数据查询、招采信息分析、关联事件分析等，辅助支持竞争决策'
  }
]

const dataList = ref(itemList0)
// const loading = ref(false)
const menuList = reactive([
  { title: '链盈', active: true, to: '/#/induestry/bulkIndustry' },
  { title: '智盈', active: false, to: '/#/induestry/smartMarket' },
  { title: '讯盈', active: false, to: '/#/induestry/inquirPolicy' }
])

const toPath = ref('/#/induestry/bulkIndustry')

const chooseMenu = (el, i) => {
  // loading.value = true
  toPath.value = el.to
  dataList.value = getDataList(i)
  console.log(menuList)
  menuList.map(el => (el.active = false))
  menuList[i].active = true
  // window.setTimeout(() => {
  //   loading.value = false
  // }, 300)
}

const getDataList = i => {
  let obj = {
    0: itemList0,
    1: itemList1,
    2: itemList2
  }
  return obj[i]
}
</script>

<style scope lang="scss">
.group-2 {
  position: relative;
  min-height: 875px;
  padding: 60px 240px 80px;

  .title {
    margin-bottom: 14px;
    font-size: 38px;
    font-weight: 500;
    color: #333;
  }

  .desc {
    width: 962px;
    margin-bottom: 40px;
    font-size: 18px;
    color: #333;
  }

  .section-1 {
    li {
      // width: 82px;
      height: 28px;
      margin-right: 36px;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: #333;
      cursor: pointer;
      border-bottom: 1px solid transparent;
    }

    li:hover {
      color: #009cff;
      border-bottom: 1px solid #009cff;
    }

    .active {
      color: #009cff;
      border-bottom: 1px solid #009cff;
    }
  }

  .menu-list {
    // @keyframes scaleYs {
    //   20% {
    //     transform: scaleY(1.01);
    //   }

    //   40% {
    //     transform: scaleY(1.02);
    //   }

    //   60% {
    //     transform: scaleY(1.03);
    //   }

    //   80% {
    //     transform: scaleY(1.04);
    //   }

    //   100% {
    //     transform: scaleY(1.05);
    //   }
    // }

    flex-wrap: wrap;

    li {
      position: relative;
      width: 48%;
      height: 230px;
      padding: 30px 23px 28px 82px;
      margin: 24px 24px 0 0;
      cursor: pointer;
      background: #fff;
      border-radius: 8px;
      transform: translateY(0);
      box-shadow: 0 2px 20px 0 rgb(221 221 221 / 34%);
      transition: all 300ms ease-in-out 0s;

      &:hover {
        transform: translateY(-10px);
        box-shadow: 7px 5px 30px 2px rgb(163 176 203 / 26%);
      }

      .menu-title {
        font-size: 24px;
        font-weight: 500;
        color: #333;
      }

      .menu-text {
        color: #333;
      }

      .menu-text:hover {
        border-bottom: 1px solid #333;
      }

      .desc {
        width: 584px;
        margin-top: 22px;
        font-size: 18px;
        font-weight: 400;
        color: #666;
      }

      a {
        width: 72px;
        font-size: 18px;
        font-weight: 400;
        color: #009cff;
        border-bottom: 1px solid transparent;
      }

      a:hover {
        border-bottom: 1px solid #009cff;
      }

      em {
        position: absolute;
        top: 35px;
        left: 35px;
      }
    }
  }
}
</style>
